<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- v -->
    <div id="app">
      1. 填写姓和名时，全名自动补全  <hr>
      2. 填写全名时，姓和名自动补全 <hr>
        <div class="row">
          <label for="">姓</label>
          <input type="text" name="" id="" v-model="firstName" >
        </div>
        <div class="row">
          <label for="">名</label>
          <input type="text" name="" id="" v-model="lastName" >
        </div>
        <div class="row">
          <label for="">全名</label>
          <input type="text" name="" id="" v-model="fullName" >
        </div>
    </div>
  </body>
  <script src="../../lib/vue.global.js"></script>
  <script>
    // vm
    /* 
    理解： 正常来说 逻辑我们最好放到VM中，但是现在上面的案例，把逻辑【复杂】放到了v,这有点不太合适【不符合关注点分离】，所以我们得把逻辑放到vm中
    问题： 怎么处理？
    解决： vue提供了一个解决方式：  计算属性  computed  表示对数据的格式化操作
  
  */
    const vm = Vue.createApp({
      data () {
        return {
          firstName: '',
          lastName: ''
        }
      },
      computed: {
        // 当计算属性写成对象时，一般表示这个计算属性时可改的
        fullName: {
          get () {
            return this.firstName + this.lastName  // 填写姓和名时，全名自动补全
          },
          set ( newVal ) {
            // newVal 新值
            // alert(newVal)
            // 假设都是单姓
            this.firstName = newVal.slice(0,1) 
            this.lastName = newVal.slice(1)
          }
        }
      }
    }).mount("#app");
  </script>
</html>
